import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
} from 'react-native';

import {Button, Icon} from 'react-native-elements';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ListItem } from 'react-native-elements';
import AccountAPI from '../../api/account';
import router from '../../util/router';
import AntDesign from 'react-native-vector-icons/AntDesign';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import BSafeAreaViewPlugs from '../../baseUI/b-safe-area-view-plus/index';
import avatar from '../../assets/img/avatar.png';

const init_assets = {
  collectNum: 0,
  followNum: 0,
  likeNum: 0,
  pointNum: 0,
  rcoinNum: 0,
};

export default class Me extends React.Component {
  state = {
    dList: [],
    userInfo: {},
    assetsInfo: {...init_assets},
  };

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      this.initData();
    });
    this.props.navigation.setOptions({
      headerStyle: {
        backgroundColor: '#fff',
        borderBottomColor: '#fff',
      },
      headerRight: (props) => {
        return (
          <AntDesign
            name="setting"
            onPress={() => {
              router.goSetting({navigation: this.props.navigation});
            }}
            size={20}
            style={{
              paddingRight: 10,
            }}></AntDesign>
        );
      },
    });
  }

  initData() {
    AccountAPI.getAssets().then((res) => {
      this.setState({
        assetsInfo: +res.errCode === 0 ? res.data : {...init_assets},
      });
    });
    AccountAPI.getUserInfo().then((res) => {
      this.setState({
        userInfo: +res.errCode === 0 ? res.data : {},
      });
    });
  }

  render() {
    const {navigation} = this.props;
    const {userInfo, assetsInfo} = this.state;
    const menu = [
      {
        label: '关注',
        value: assetsInfo.followNum,
        onClick: () => {
          router.goMyFollow({navigation});
        },
      },
      {
        label: '收藏',
        value: assetsInfo.collectNum,
        onClick: () => {
          router.goMyCollect({navigation});
        },
      },
      {
        label: '点赞',
        value: assetsInfo.likeNum,
        onClick: () => {
          router.goMyLike({navigation});
        },
      },
      {
        label: '积分',
        value: assetsInfo.pointNum,
        onClick: () => {
          router.goMyPoint({navigation});
        },
      }
    ];
    const list = [
      {
        name: '我的接单',
        icon: 'av-timer',
        onClick: () => {
          router.goMyEnroll({navigation});
        },
      },
      {
        name: '我的需求',
        icon: 'av-timer',
        onClick: () => {
          router.goMyProject({navigation});
        },
      },
      {
        name: '发布需求',
        icon: 'av-timer',
        onClick: () => {
          router.goCreateProject({navigation});
        },
      },
      {
        name: '账户设置',
        icon: 'av-timer',
        onClick: () => {
          router.goMyUserInfo({navigation});
        },
      },
      {
        name: '系统设置',
        icon: 'av-timer',
        onClick: () => {
          router.goSetting({navigation});
        },
      },
      {
        name: '立即登录',
        icon: 'av-timer',
        onClick: () => {
          navigation.navigate('Login', {
            success: () => {
              this.initData();
            },
          });
        },
      },
    ];

    return (
      <BSafeAreaViewPlugs bottomInset={false}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View>
            <View style={styles.banner}>
              <View style={styles.user_card}>
                <View style={[styles.flex, styles.user_card_main]}>
                  {userInfo.avatar ? (
                    <Image
                      style={styles.user_avatar}
                      source={{uri: userInfo.avatar}}></Image>
                  ) : (
                    <Image style={styles.user_avatar} source={avatar}></Image>
                  )}
                  <View>
                    <Text style={{color: '#fff', fontSize: 18}}>
                      {userInfo.nickname}
                    </Text>
                    <Text style={{color: '#fff', marginTop: 4}}>
                      {userInfo.email}
                    </Text>
                  </View>
                  {userInfo.avatar ? (
                    <View style={styles.check_btn}>
                      <Button
                        title="立即签到"
                        type="outline"
                        buttonStyle={{
                          width: 70,
                          borderColor: '#fff',
                          borderRadius: 1,
                        }}
                        titleStyle={{
                          fontSize: 12,
                          color: '#fff',
                        }}
                      />
                    </View>
                  ) : (
                    <View
                      style={{
                        position: 'absolute',
                        left: 80,
                      }}>
                      <Button
                        title="登录/注册"
                        type="outline"
                        buttonStyle={{
                          width: 90,
                          borderColor: 'transparent',
                          borderRadius: 1,
                        }}
                        titleStyle={{
                          fontSize: 16,
                          color: '#fff',
                        }}
                        onPress={() => {
                          this.props.navigation.navigate('Login', {
                            success: () => {
                              this.initData();
                            },
                          });
                        }}
                      />
                    </View>
                  )}
                </View>
                <View style={[styles.menu, styles.flex]}>
                  {menu.map((menu, key) => {
                    return (
                      <View
                        style={[styles.flex_auto, styles.menu_item]}
                        key={key}>
                        <TouchableWithoutFeedback onPress={menu.onClick}>
                          <View style={styles.menu_item}>
                            <Text
                              style={{
                                fontSize: 20,
                                color: '#fff',
                                fontWeight: '600',
                              }}>
                              {menu.value}
                            </Text>
                            <Text
                              style={{
                                fontSize: 13,
                                marginTop: 6,
                                color: '#fff',
                              }}>
                              {menu.label}
                            </Text>
                          </View>
                        </TouchableWithoutFeedback>
                      </View>
                    );
                  })}
                </View>
              </View>
            </View>
            <View style={{padding: 10}}>
              <View
                style={{
                  padding: 10,
                  borderRadius: 8,
                  backgroundColor: '#fff',
                }}>
                {list.map((l, i) => (
                  <ListItem
                    containerStyle={{
                      paddingVertical: 12,
                    }}
                    key={i}
                    onPress={() => {
                      l.onClick && l.onClick();
                    }}>
                    {/* <Icon name={l.icon} /> */}
                    <ListItem.Content>
                      <ListItem.Title>{l.name}</ListItem.Title>
                    </ListItem.Content>
                    <ListItem.Chevron />
                  </ListItem>
                ))}
              </View>
            </View>
          </View>
        </ScrollView>
      </BSafeAreaViewPlugs>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    position: 'relative',
    backgroundColor: Colors.lighter,
  },
  banner: {
    backgroundColor: '#fff',
  },
  user_card: {
    height: 200,
    marginTop: 10,
    marginBottom: 10,
    marginHorizontal: 12,
    backgroundColor: '#615963',
    borderRadius: 6,
  },
  user_card_main: {
    position: 'relative',
    display: 'flex',
    height: 80,
    marginTop: 30,
    paddingHorizontal: 16,
  },
  user_avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 8,
  },
  check_btn: {
    position: 'absolute',
    right: 16,
  },
  menu: {
    marginTop: 10,
  },
  menu_item: {
    display: 'flex',
    alignItems: 'center',
    height: 48,
    textAlign: 'center',
    justifyContent: 'center',
  },
  links: {
    paddingHorizontal: 12,
    borderRadius: 6,
  },
  flex: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  flex_row: {
    flexDirection: 'row',
  },
  flex_column: {
    flexDirection: 'column',
  },
  flex_auto: {
    flex: 1,
  },
  lh_sm: {
    lineHeight: 18,
  },
});
